<template>
  <page-header-wrapper :title="false">
    <a-card :bordered="false">
      <div slot="title">
        <a-row :gutter="10" :style="{ height: '40px', lineHeight: '40px' }">
          <a-col :span="14">
            <a-row type="flex" justify="start">
              <a-col :span="3">大客户总览</a-col>
              <!--              <a-col :span="12">-->
              <!--                <a-carousel :dots="false" autoplay>-->
              <!--                  <router-link :to="{ name: 'Wechat' }">-->
              <!--                    <a-alert showIcon type="info">-->
              <!--                      <template slot="message">-->
              <!--                        <ellipsis :length="50">测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题测试标题</ellipsis>-->
              <!--                      </template>-->
              <!--                    </a-alert>-->
              <!--                  </router-link>-->
              <!--                </a-carousel>-->
              <!--              </a-col>-->
            </a-row>
          </a-col>
          <a-col :span="10">
            <div :style="{ textAlign: 'right' }">
              <!--              <a-button type="danger" @click="onOtherSearch">查询客户</a-button>-->
              <!--              <a-divider type="vertical" />-->
              <!--              <a-button type="danger" @click="onStateModal">领取统计</a-button>-->
              <!--              <a-divider type="vertical" />-->
              <a-button type="danger" @click="$router.push({ name: 'Wechat' })">微信</a-button>
            </div>
          </a-col>
        </a-row>
      </div>
      <a-row type="flex" justify="start">
        <a-col :flex="itemWidth" v-if="accounting">
          <a-card class="l-work-item" hoverable @click="onGetAccount">
            <div class="title">***</div>
            <div class="content">会计同行</div>
          </a-card>
          <!--          <a-card style="margin-top:15px;" hoverable @click="onChange('account')">-->
          <!--            <div class="content">会计领取概况</div>-->
          <!--          </a-card>-->
        </a-col>
        <a-col :flex="itemWidth" v-if="reject">
          <a-card class="l-work-item" hoverable @click="onGetReject">
            <div class="title">***</div>
            <div class="content">驳回复审</div>
          </a-card>
          <!--          <a-card style="margin-top:15px;" hoverable @click="onChange('reject')">-->
          <!--            <div class="content">驳回领取概况</div>-->
          <!--          </a-card>-->
        </a-col>
        <a-col :flex="itemWidth" v-if="notice">
          <a-card class="l-work-item" hoverable @click="onGetSend">
            <div class="title">***</div>
            <div class="content">送达公告</div>
          </a-card>
          <!--          <a-card style="margin-top:15px;" hoverable @click="onChange('notice')">-->
          <!--            <div class="content">公告领取概况</div>-->
          <!--          </a-card>-->
        </a-col>
        <a-col :flex="itemWidth" v-if="iso">
          <a-card class="l-work-item" hoverable @click="onGetIso">
            <div class="title">***</div>
            <div class="content">设计公司</div>
          </a-card>
          <!--          <a-card style="margin-top:15px;" hoverable @click="onChange('iso')">-->
          <!--            <div class="content">ISO领取概况</div>-->
          <!--          </a-card>-->
        </a-col>
        <a-col :flex="itemWidth" v-if="ptyp">
          <a-card class="l-work-item" hoverable @click="onGetPatent">
            <div class="title">***</div>
            <div class="content">专利黄页</div>
          </a-card>
          <!--          <a-card style="margin-top:15px;" hoverable @click="onChange('patent')">-->
          <!--            <div class="content">专利领取概况</div>-->
          <!--          </a-card>-->
        </a-col>
        <a-col :flex="itemWidth" v-if="tmc">
          <a-card class="l-work-item" hoverable @click="getChange">
            <div class="title">***</div>
            <div class="content">商标变更</div>
          </a-card>
          <!--          <a-card style="margin-top:15px;" hoverable @click="onChange('tmc')">-->
          <!--            <div class="content">变更领取概况</div>-->
          <!--          </a-card>-->
        </a-col>
        <a-col :flex="itemWidth" v-if="tme">
          <a-card class="l-work-item" hoverable @click="onGetXz">
            <div class="title">***</div>
            <div class="content">商标续展</div>
          </a-card>
          <!--          <a-card style="margin-top:15px;" hoverable @click="onChange('tme')">-->
          <!--            <div class="content">续展领取概况</div>-->
          <!--          </a-card>-->
        </a-col>
      </a-row>
    </a-card>
    <total-customer></total-customer>
    <!--    <account-customer></account-customer>-->
    <!--    <other-search v-if="searchVisible" @cancel="otherSearchExit"></other-search>-->
    <!--    <receive-state v-if="stateVisible" @cancel="onStateCancel"></receive-state>-->
    <iso-modal v-if="isoVisible" @cancel="isoExit"></iso-modal>
    <send-modal v-if="sendVisible" @cancel="sendExit"></send-modal>
    <reject-modal v-if="rejectVisible" @cancel="rejectExit"></reject-modal>
    <account-modal v-if="accountVisible" @cancel="accountExit"></account-modal>
    <xz-modal v-if="xzVisible" @cancel="xzCancel"></xz-modal>
    <change-modal v-if="changeVisible" @cancel="changeCancel"></change-modal>
    <patent-modal v-if="patentVisible" @cancel="patentCancel"></patent-modal>
    <!--    <add-customer v-if="addCustomerVisible" @cancel="addCustomerExit"></add-customer>-->
    <!--    <add-trademark v-if="addTrademarkVisible" @cancel="trademarkExit"></add-trademark>-->
  </page-header-wrapper>
</template>

<script>
import { IsoModal, SendModal, RejectModal, AccountModal, XzModal, ChangeModal, PatentModal } from '@/components'
import { TotalCustomer } from './components'
import Ellipsis from '@/components/Ellipsis/Ellipsis'
import store from 'store'
import AddTrademark from '@/views/adviser/components/AddTrademark'
import customerColumns from '@/columns/customer'
import AccountCustomer from '@/views/adviser/components/AccountCustomer'
import OtherSearch from '@/views/adviser/components/OtherSearch'
import { VIP } from '@/store/mutation-types'

export default {
  name: 'OtherAdviser',
  components: {
    XzModal,
    AccountCustomer,
    AddTrademark,
    IsoModal,
    TotalCustomer,
    Ellipsis,
    SendModal,
    AccountModal,
    RejectModal,
    OtherSearch,
    ChangeModal,
    PatentModal
  },
  data () {
    return {
      stateVisible: false,
      rejectVisible: false,
      accountVisible: false,
      isoVisible: false,
      xzVisible: false,
      sendVisible: false,
      changeVisible: false,
      patentVisible: false,
      itemWidth: '220px',
      unpayColumns: customerColumns,
      tab: '',
      searchVisible: false,
      vip: store.get(VIP),
      menu: ['accounting', 'reject', 'notice', 'iso', 'ptyp', 'tmc', 'tme'],
      accounting: false,
      reject: false,
      notice: false,
      iso: false,
      ptyp: false,
      tmc: false,
      tme: false,
      count: {}
    }
  },
  created () {
    for (let i = 0; i < this.menu.length; i++) {
      for (let j = 0; j < this.vip.length; j++) {
        if (this.vip[j] === this.menu[i]) {
          this[this.vip[j]] = true
        }
      }
    }
  },
  methods: {
    // getData () {
    //   getOtherData().then(res => {
    //     console.log(res)
    //   })
    // },
    onGetSend () {
      this.sendVisible = true
    },
    sendExit (visible) {
      this.sendVisible = visible
    },
    onGetIso () {
      this.isoVisible = true
    },
    isoExit (visible) {
      this.isoVisible = visible
    },
    onGetAccount () {
      this.accountVisible = true
    },
    accountExit (visible) {
      this.accountVisible = visible
    },
    onGetReject () {
      this.rejectVisible = true
    },
    rejectExit (visible) {
      this.rejectVisible = visible
    },
    onStateModal () {
      this.stateVisible = true
    },
    onStateCancel (visible) {
      this.stateVisible = visible
    },
    addCustomerModal () {
      this.addCustomerVisible = true
    },
    addCustomerExit (visible) {
      this.addCustomerVisible = visible
    },
    trademarkModal () {
      this.addTrademarkVisible = true
    },
    trademarkExit (visible) {
      this.addTrademarkVisible = visible
    },
    onGetXz () {
      this.xzVisible = true
    },
    xzCancel (visible) {
      this.xzVisible = visible
    },
    getChange () {
      this.changeVisible = true
    },
    changeCancel (visible) {
      this.changeVisible = visible
    },
    onGetPatent () {
      this.patentVisible = true
    },
    patentCancel (visible) {
      this.patentVisible = visible
    },
    onOtherSearch () {
      this.searchVisible = true
    },
    otherSearchExit (visible) {
      this.searchVisible = visible
    }
  }
}
</script>

<style scoped>
.l-adviser-comeon {
  padding-left: 40px;
  background: url('../../assets/images/adviser/gb.png') left center no-repeat;
  line-height:20px;
  font-size: 12px;
}
.l-work-item{
  height: 130px;
  background: #88b665;
  color: #fff;
}
.l-work-item .title {
  font-size: 30px;
  font-weight: 400;
}
.l-work-item .content {
  font-size: 16px;
}
.l-work-item2 {
  height: 130px;
  padding: 5px 0 0 10px;
  background:#fff;
}
.call-wrapper {
  font-size: 14px;
}
</style>
